<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品详情 - 恩爸商城</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/product-detail.css">
    <link rel="stylesheet" href="js/notify/toastr.min.css"></link>
</head>
<body>
    <!-- 头部导航 -->
    <div class="header">
        <div class="container">
            <div class="logo">
                <a href="index.html">恩爸商城</a>
            </div>
            <div class="search">
                <input type="text" placeholder="请输入商品名称">
                <button>搜索</button>
            </div>
        </div>
    </div>

    <!-- 商品详情主体 -->
    <div class="product-detail">
        <div class="container">
            <!-- 商品路径导航 -->
            <div class="product-nav">
                <div class="breadcrumb">
                    <a href="index.html">首页</a> &gt;
                    <a href="#">手机数码</a> &gt;
                    <a href="#">手机通讯</a> &gt;
                    <span class="current">商品名称</span>
                </div>
            </div>

            <!-- 商品信息区域 -->
            <div class="product-info">
                <!-- 左侧商品图片 -->
                <div class="product-gallery">
                    <div class="preview">
                        <img src="" alt="" class="main-img">
                    </div>
                    <div class="thumb-list">
                        <!-- JS动态插入缩略图 -->
                    </div>
                </div>

                <!-- 右侧商品信息 -->
                <div class="product-main">
                    <h1 class="product-title"></h1>
                    <div class="product-desc"></div>
                    
                    <!-- 价格区域 -->
                    <div class="product-price-area">
                        <div class="price-line">
                            <span class="label">价格</span>
                            <span class="price">
                                <em class="symbol">¥</em>
                                <em class="value"></em>
                            </span>
                        </div>
                        <div class="promotion-line" style="margin-bottom: 10px;">
                            <span class="label">促销</span>
                            <span class="promotion-info">
                                <span class="tag">限时优惠</span>
                                <span class="promotion-desc">购买即赠送积分</span>
                            </span>
                        </div>
                    </div>

                    <!-- 配送区域 -->
                    <div class="delivery-area">
                        <div class="delivery-line">
                            <span class="label">配送</span>
                            <span class="delivery-info">
                                <span class="address">北京市 海淀区</span>
                                <span class="delivery-time">预计明天送达</span>
                            </span>
                        </div>
                    </div>

                    <!-- 选择区域 -->
                    <div class="choose-area">
                        <!-- 规格选择 -->
                        <div class="choose-line">
                            <span class="label">选择</span>
                            <div class="choose-options">
                                <!-- JS动态插入规格选项 -->
                            </div>
                        </div>
                        
                        <!-- 数量选择 -->
                        <div class="number-line" style="margin-bottom: 10px;">
                            <span class="label">数量</span>
                            <div class="number-wrap">
                                <button class="minus">-</button>
                                <input type="text" value="1" class="number-input">
                                <button class="plus">+</button>
                            </div>
                        </div>
                    </div>

                    <!-- 按钮区域 -->
                    <div class="action-area">
                        <button class="btn-buy">立即购买</button>
                        <button class="btn-cart">加入购物车</button>
                    </div>
                </div>
            </div>

            <!-- 商品详情选项卡 -->
            <div class="product-tab">
                <div class="tab-header">
                    <div class="tab-item active">商品介绍</div>
                    <div class="tab-item">规格参数</div>
                    <div class="tab-item">商品评价</div>
                </div>
                <div class="tab-content">
                    <!-- 商品介绍 -->
                    <div class="tab-pane active" id="detail">
                        <!-- JS动态插入商品详情 -->
                    </div>
                    <!-- 规格参数 -->
                    <div class="tab-pane" id="params">
                        <!-- JS动态插入规格参数 -->
                    </div>
                    <!-- 商品评价 -->
                    <div class="tab-pane" id="comments">
                        <!-- JS动态插入评价内容 -->
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script type="module" src="js/productDetail.js"></script>
    <script src="js/notify/toastr.min.js"></script>
    <script src="js/notify/notify.js"></script>
</body>
</html> 